@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .aBoder {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(166, 166, 166, 0.7);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .border-ritual-black-20 {
    border-color: #0003;
  }
  .bg-ritual-black-10 {
    background-color: #0000001a;
  }
  .z_50Class {
    display: contents;
    --padding: 0;
    --layer-width: 22px;
    --layer-height: 2px;
    --layer-spacing: 5px;
    --hover-opacity: 0.8;
  }
  .border-ritual-white-20 {
     background-color: #ffffff1a;
     border-color: #fff3;
  }
  .HamburgerItem {
    width: 24px;
    height: 24px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -4px;
  }
}

.hamburger.svelte-jas1sv.svelte-jas1sv {
  padding: var(--padding, 15px);
  display: inline-block;
  cursor: pointer;
  transition-property: opacity,filter;
  transition-duration: .15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}

.hamburger-box {
  display: flex;
  flex-direction: column;
}
.hamburger-inner, 
.hamburger-inner:before, .hamburger-inner:after {
  width: var(--layer-width, 30px);
  height: var(--layer-height, 4px);
  background-color: var(--color, black);
  border-radius: var(--border-radius, 4px);
  position: absolute;
  transition-property: transform;
  transition-duration: .15s;
  transition-timing-function: ease;
  @apply dark:bg-white !important;
}
.hamburger-inner.svelte-jas1sv.svelte-jas1sv:before {
  top: calc((var(--layer-spacing, 6px) + var(--layer-height, 4px)) * -1);
}
.hamburger--spin.svelte-jas1sv .hamburger-inner.svelte-jas1sv:before {
  transition: top .1s .25s ease-in,opacity .1s ease-in;
}

.hamburger-inner.svelte-jas1sv.svelte-jas1sv:before, .hamburger-inner.svelte-jas1sv.svelte-jas1sv:after{
  content: '';
  display: block;
}

.hamburger--spin.svelte-jas1sv .hamburger-inner.svelte-jas1sv:after { 
  transition: bottom .1s .25s ease-in,transform .22s cubic-bezier(.55,.055,.675,.19);
}
.hamburger-inner.svelte-jas1sv.svelte-jas1sv:after {
  bottom: calc((var(--layer-spacing, 6px) + var(--layer-height, 4px)) * -1);
}

.hamburger-inner.svelte-jas1sv.svelte-jas1sv:before, .hamburger-inner.svelte-jas1sv.svelte-jas1sv:after {
  content: "";
  display: block;
}

.hamburger-inner.svelte-jas1sv.svelte-jas1sv, .hamburger-inner.svelte-jas1sv.svelte-jas1sv:before, .hamburger-inner.svelte-jas1sv.svelte-jas1sv:after {
  width: var(--layer-width, 30px);
  height: var(--layer-height, 4px);
  background-color: var(--color, black);
  border-radius: var(--border-radius, 4px);
  position: absolute;
  transition-property: transform;
  transition-duration: .15s;
  transition-timing-function: ease;
}

.\[\&\>div\>button\>span\>span\]\:after\:\!bg-black>div>button>span>span:after {
  content: var(--tw-content);
  --tw-bg-opacity: 1 !important;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity))!important;
}


.hamburger--spin.is-active.svelte-jas1sv .hamburger-inner.svelte-jas1sv {
  transform: rotate(225deg);
  transition-delay: .12s;
  transition-timing-function: cubic-bezier(.215,.61,.355,1);
}
.hamburger--spin.is-active.svelte-jas1sv .hamburger-inner.svelte-jas1sv:before {
  top: 0;
  opacity: 0;
  transition: top .1s ease-out,opacity .1s .12s ease-out;
}

.hamburger--spin.is-active.svelte-jas1sv .hamburger-inner.svelte-jas1sv:after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom .1s ease-out,transform .22s .12s cubic-bezier(.215,.61,.355,1);
}
